<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>1对1</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<!-- <link rel="shortcut icon" href="/favicon.ico"> -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
		<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			.clearfix:after {
				display: table;
				content: "";
				clear: both;
			}
			
			.fl {
				float: left;
			}
			
			.fr {
				float: right;
			}
			/*.kecheng {
            color: rgb(94, 94, 165);
            margin-top: 0.28rem;
            font-size: 0.9em;
            border: 0.05rem solid rgb(94, 94, 165);
            padding: 0.2rem;
            border-radius: 0.2rem;
        }*/
			
			.content-block,
			.tabs {
				margin: 0px;
				padding: 0px;
			}
			
			.cnt {
				width: 100%;
				background: white;
			}
			
			.tabconeten {
				font-size: 0.7rem;
				padding-top: 0.2rem;
				padding-left: 1rem;
				color: #9b9b9b;
				border-bottom: 0.1rem solid #f2f2f2;
			}
			
			.zixun {
				width: 100%;
				border-bottom: 0.1rem solid #f2f2f2;
				padding-bottom: 0.5rem;
			}
			
			.zixun1 {
				width: 3rem;
				height: 3rem;
				border-radius: 50%;
				background: url(imges/daoshi1.png)no-repeat center center;
				background-size: 100%;
				margin-top: 0.6rem;
				margin-left: 1.4rem;
			}
			
			.zixun:nth-of-type(3) .zixun1 {
				background: url(imges/daoshi2.png)no-repeat center center;
				background-size: 100%;
			}
			
			.zixun21 {
				font-weight: 600;
				color: black;
				margin-left: 1rem;
				margin-top: 0.6rem;
			}
			
			.zixun22 {
				font-size: 0.7rem;
				color: #9c9c9c;
				margin-left: 1.4rem;
			}
			
			.zixun:last-child {
				width: 100%;
				height: 1.5rem;
				background: white;
				line-height: 1.5rem;
				text-align: center;
				font-size: 0.7rem;
			}
			
			.zixun:last-child span {
				color: #009eff;
			}
			
			.cnt1,
			cont {
				margin: 0px;
				padding: 0px;
			}
			
			.cnt1 {
				text-align: center;
				color: #009eff;
				font-size: 1rem;
				margin-top: 0.4rem;
				margin-bottom: 1.4rem;
			}
			
			.cont {
				color: #9c9c9c;
				font-size: 0.7rem;
				text-align: center;
				margin-bottom: 0.5rem;
			}
			
			.cont:nth-of-type(3) {
				margin-top: -1rem;
			}
			
			.cont:nth-of-type(4) {
				margin-left: 0.8rem;
			}
			
			.cont:nth-of-type(6) {
				margin-left: -1.3rem;
			}
			
			.cont span {
				margin-right: 0.5rem;
			}
			
			.cont span:nth-of-type(1) {
				display: inline-block;
				font-size: 0.65rem;
				background: #009eff;
				color: white;
				width: 1rem;
				height: 1rem;
				line-height: 1rem;
				border-radius: 50%;
			}
			
			.cont span:nth-of-type(2) {
				font-size: 0.95rem;
				color: black;
			}
			
			.cont span:nth-of-type(3) {
				color: black;
			}
		</style>
	</head>

	<body>
		<div class="page-group">
			<div class="page page-current">
				<!-- 你的html代码 -->
				<nav class="bar bar-tab">
					<a class="tab-item external" href="首页.html">
						<span class="icon icon-home"></span>
						<span class="tab-label">首页</span>
					</a>
					<a class="tab-item active" href="#">
						<span class="icon icon-browser"></span>
						<span class="tab-label">1对1</span>
					</a>
					<a class="tab-item" href="">
						<span class="icon icon-search"></span>
						<span class="tab-label">拍照</span>
					</a>
					<a class="tab-item" href="">
						<span class="icon icon-friends"></span>
						<span class="tab-label">朋友圈</span>
					</a>
					<a class="tab-item" href="">
						<span class="icon icon-me"></span>
						<span class="tab-label">我</span>
					</a>
				</nav>
				<div class="content">
					<!-- 这里是页面内容区 -->
					<header class="bar bar-nav clearfix">
						<h1 class="title">1对1</h1>
					</header>
					<div class="content">
						<div class="buttons-tab">
							<a href="#tab1" class="tab-link active button">首页</a>
							<a href="#tab2" class="tab-link button">语文</a>
							<a href="#tab3" class="tab-link button">数学</a>
							<a href="#tab4" class="tab-link button">英语</a>
							<a href="#tab5" class="tab-link button">直播</a>
						</div>
						<div class="content-block">
							<div class="tabs">
								<div id="tab1" class="tab active">
									<div class="content-block">
										<div class="cnt">
											<div class="tabconeten"> 班课全面辅导重点难题</div>
											<div class="zixun clearfix">
												<div class="zixun1 fl"></div>
												<div class="zixun2 fl">
													<div class="zixun21">小童老师</div>
													<div class="zixun22">评分:4.5&nbsp;&nbsp;辅导次数13668</div>
													<div class="zixun22">教学能手&nbsp;&nbsp;应考专家&nbsp;&nbsp;方法独特</div>
												</div>
												<div class="zixun3 fr"></div>
											</div>
											<div class="zixun clearfix">
												<div class="zixun1 fl"></div>
												<div class="zixun2 fl">
													<div class="zixun21">小莉老师</div>
													<div class="zixun22">评分:4.5&nbsp;&nbsp;辅导次数7966</div>
													<div class="zixun22">名校毕业&nbsp;&nbsp;应考专家&nbsp;&nbsp;幽默风趣</div>
												</div>
												<div class="zixun3 fr"></div>
											</div>
											<div class="zixun clearfix">
												<div class="zixun1 fl"></div>
												<div class="zixun2 fl">
													<div class="zixun21">小熏老师</div>
													<div class="zixun22">评分:4.5&nbsp;&nbsp;辅导次数8739</div>
													<div class="zixun22">领域精英&nbsp;&nbsp;教学严谨&nbsp;&nbsp;方法独特</div>
												</div>
												<div class="zixun3 fr"></div>
											</div>
											<div class="zixun">
												当前共有<span>296</span>位老师在线解答
											</div>
										</div>
										<div class="cnt1">1对1超强名师阵容</div>
										<div class="cont">
											<span>1</span><span>懂教学</span><span>|</span>紧抓各省考点和命题方向
										</div>
										<div class="cont">
											<span>2</span><span>经验足</span><span>|</span>多年1对1辅导经验，善沟通
										</div>
										<div class="cont">
											<span>3</span><span>有实力</span><span>|</span>层层严格筛选，优中选优
										</div>
										<div class="cont">
											<span>4</span><span>阵容强</span><span>|</span>名师阵容，超强组合
										</div>
									</div>
								</div>
								<div id="tab2" class="tab">
									<div class="content-block">
										<p>This is tab 2 content</p>
									</div>
								</div>
								<div id="tab3" class="tab">
									<div class="content-block">
										<p>This is tab 3 content</p>
									</div>
								</div>
								<div id="tab4" class="tab">
									<div class="content-block">
										<p>This is tab 4 content</p>
									</div>
								</div>
								<div id="tab5" class="tab">
									<div class="content-block">
										<p>This is tab 5 content</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-3.2.1.js"></script>
		<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
		<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
		<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
		<script>
			$(start);

			function start() {
				$(".bar>a:nth-of-type(3)").click(
					function() {
						$(location).fadeIn().attr("href", "拍照搜题.html");
					}
				)
				$(".bar>a:nth-of-type(4)").click(
					function() {
						$(location).fadeIn().attr("href", "朋友圈.html");
					}
				)
				$(".bar>a:nth-of-type(5)").click(
					function() {
						$(location).fadeIn().attr("href", "我的.html");
					}
				)
			}
		</script>
	</body>

</html>